<template>
  <div class="echarts-outer-wrapper flex-cloumn width-620">
    <Title
      title="税务登记(分行业)"
      time="2"
      timePosition="left"
      dw="单位：户"
    ></Title>
    <div class="echart-tab-wrapper">
      <div class="tabs">
        <div
          class="tab-item"
          :class="{ select: tabIndex === index }"
          v-for="(item, index) in tabList"
          :key="index"
          @click="changeTab(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="legend">
      <div class="legend-item" v-for="(item, index) in legend" :key="index">
        <img v-if="index === 0" src="@/assets/images/echart-legend-5.png" />
        <img v-if="index === 1" src="@/assets/images/echart-legend-6.png" />
        <img v-if="index === 2" src="@/assets/images/echart-legend-7.png" />
        <img v-if="index === 3" src="@/assets/images/echart-legend-4.png" />
        {{ item }}
      </div>
    </div>
    <div ref="echarts" class="flex1"></div>
  </div>
</template>
<script>
const KeyValue = ["yxList", "dwList", "gtList", "xbList", "zxList"];
const color2 = ["#4585DD", "#C39677", "#52D077", "#ffff00"];
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";
import * as echarts from "echarts";

export default {
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: null,
      tabList: ["有效", "单位", "个体", "新办", "注销"],
      tabIndex: 0,
      legend: [],
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.echarts);
    this.ajax({
      url: "/dpzsDjcxService/swdjFhyQuery",
      method: "post",
      data: {
        param: {
          swjg: this.$route.query.qx_swjg_dm,
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      this.changeTab(this.tabIndex);
    });
  },
  methods: {
    changeTab(index) {
      this.myChart.clear();
      this.tabIndex = index;
      let allData = {
        xdata: [],
        data: [],
      };
      let currentData = this.EchartData[KeyValue[this.tabIndex]];
      let xdata = [];
      let zchdata = {
        name: "正常户",
        data: [],
      }; // 正常
      let fzchdata = {
        name: "非正常户",
        data: [],
      }; // 非正常
      let qshdata = {
        name: "清算户",
        data: [],
      }; // 清算
      let zhcdata = {
        name: "总户数",
        data: [],
      }; // 总户数
      let tyhdata = {
        name: "停业户",
        data: [],
      }; // 停业户
      let dwnsrdata = {
        name: "单位纳税人",
        data: [],
      }; // 单位纳税人数量
      let gtgshdata = {
        name: "个体工商",
        data: [],
      }; // 个体工商数量
      let lsswdjdata = {
        name: "临时税务登记",
        data: [],
      }; // 临时税务登记数量
      for (let item of currentData) {
        xdata.push(item.hy);
        if (item.zch >= 0) zchdata.data.push(item.zch);
        if (item.fzch >= 0) fzchdata.data.push(item.fzch);
        if (item.qsh >= 0) qshdata.data.push(item.qsh);
        if (item.zhc >= 0) zhcdata.data.push(item.zhc);
        if (item.tyh >= 0) tyhdata.data.push(item.tyh);
        if (item.dwnsr >= 0) dwnsrdata.data.push(item.dwnsr);
        if (item.gtgsh >= 0) gtgshdata.data.push(item.gtgsh);
        if (item.lsswdj >= 0) lsswdjdata.data.push(item.lsswdj);
      }
      allData.xdata = xdata;
      if (zchdata.data.length !== 0) {
        allData.data.push(zchdata);
      }
      if (fzchdata.data.length !== 0) {
        allData.data.push(fzchdata);
      }
      if (qshdata.data.length !== 0) {
        allData.data.push(qshdata);
      }
      if (tyhdata.data.length !== 0) {
        allData.data.push(tyhdata);
      }
      if (dwnsrdata.data.length !== 0) {
        allData.data.push(dwnsrdata);
      }
      if (gtgshdata.data.length !== 0) {
        allData.data.push(gtgshdata);
      }
      if (lsswdjdata.data.length !== 0) {
        allData.data.push(lsswdjdata);
      }
      if (zhcdata.data.length !== 0) {
        allData.data.push(zhcdata);
      }
      this.init(allData);
    },
    init(allData) {
      let DATA = allData.data.filter((item) => {
        return item.name !== "总户数";
      });
      let series = [];
      let numAdd = DATA.reduce((pre, cur, i) => {
        pre[i] = cur.data.map(
          (el, id) => el + (pre[i - 1] ? pre[i - 1][id] : 0)
        );
        return pre;
      }, []);
      for (let i = 0; i < DATA.length; i++) {
        series.push({
          name: "",
          type: "scatter",
          emphasis: {
            scale: false,
          },
          symbolSize: 10,
          itemStyle: {
            color: color2[i],
            shadowColor: color2[i],
            shadowBlur: 5,
            borderWidth: 1,
            opacity: 1,
          },
          z: 2,
          emphasis: {
            symbolSize: 10,
            scale: false,
          },
          tooltip: { show: false },
          data: numAdd[i],
        });
        if (i == 0) {
          DATA[i].data = DATA[i].data.map((val) => {
            return {
              value: val,
              itemStyle: {
                barBorderRadius: [3, 0, 0, 3],
              },
            };
          });
        }
        if (i == DATA.length - 1) {
          DATA[i].data = DATA[i].data.map((val) => {
            return {
              value: val,
              itemStyle: {
                barBorderRadius: [0, 3, 3, 0],
              },
            };
          });
        }
        series.push({
          name: DATA[i].name,
          type: "bar",
          // 宽度
          barWidth: "6",
          // 堆叠
          stack: "总量",
          showBackground: true,
          backgroundStyle: {
            borderColor: "rgba(3, 6, 79, 0.52)",
            borderWidth: 8,
            color: "rgba(3, 6, 79, 0.52)",
            barBorderRadius: 5,
          },
          data: DATA[i].data,
          itemStyle: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 16,
              },
              color: color2[i],
            },
          },
        });
      }
      let legendData = DATA.map((item) => {
        return item.name;
      });
      this.legend = legendData;
      const option = {
        color: ["#65779E"],
        tooltip: echartOption.tooltip(),
        grid: echartOption.echartGrid({
          top: 18,
          bottom: 12,
        }),
        dataZoom: echartOption.dataZoomRight([0, 1], {
          endValue: 8,
        }),
        xAxis: {
          type: "value",
          position: "top",
          splitNumber: 3,
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(98, 162, 205, 0.4)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              textStyle: {
                fontSize: 16,
                color: "#fff",
                fontFamily: "SourceHanSansCN-Regular",
              },
              formatter: (params) => {
                if (params.length > 5) {
                  params = params.slice(0, 4) + "...";
                }
                return params;
              },
            },
            // 纵坐标数据
            data: allData.xdata,
            yAxisIndex: 0,
            // 横坐标 分割线等取消显示
            axisTick: {
              show: false,
              interval: 2,
            },
            axisLine: {
              show: false,
            },
          },
          // 右边显示数据
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            data: allData.data[allData.data.length - 1].data,
          },
        ],
        series: series,
      };
      function getSymbolData(data) {
        let arr = [];
        for (var i = 0; i < data.length; i++) {
          arr.push({
            value: data[i],
            symbolPosition: "end",
          });
        }
        return arr;
      }
      this.myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts-outer-wrapper {
  width: 614px;
  height: 638px;
}
.legend {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  .legend-item {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
    margin: 0 12px;
    font-size: 16px;
    img {
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
  }
}
</style>
